<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*
			 样式的冲突
			 	    当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值是，
			 	    此时就发生了变化，发生变化时，应用哪个样式由选择器的权重（优先级）决定
			 	    
			 	  选择器的权重：
			 	  			!important    无穷大，在开发中这个一定要慎用
			 	  			内联样式：          1,0,0,0
			 	  			id选择器：          0,1,0,0
			 	  			类和伪类选择器：0,0,1,0
			 	  			元素选择器：       0,0,0,1
			 	  			通配选择器*：     0,0,0,0
			 	  			继承的样式          没有优先级
			 	  	
			 	  比较优先级是，需要将所有的选择器的优先级进行相加计算，
			 	  最后优先级越高，则越优先显示
			 	  选择器的累加不会超过其最大的数量级，意思就是说，类选择器再高也不会超过id选择器
			 	  	如果优先级计算后相等，则优先使用靠下的样式		
			*/
			*{
				font-size: 50px;
			}
			div{
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		
		<div id="box" class="red">我是一个div <span>我是div中的span</span></div>
	</body>
</html>
